<template>
  <div>
    <!-- 头部导航 -->
    <!-- <div class="header"> -->
      <!-- 头部导航 -->
      <!-- <div class="title_main">
        <div class="iconfont icon-shouye"></div>
        <div class="content" style="font-weight: 700; font-size: 20px">网易严选</div>
        <div class="iconfont icon-sousuotianchong"></div>
        <div class="iconfont icon-gouwuchekong" @click="goShopCart"></div>
      </div> -->
    <!-- </div> -->
    <Nav></Nav>
    <!-- 中间商品信息 -->
    <div class="container">
      <!-- 小轮播图 -->
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in skuInfo.skuImageList" :key="index">
            <img v-lazy="item.imgUrl" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 商品价格 -->
      <div class="price">
        <div class="top">超值捡漏</div>
        <div class="bottom">
          <div class="left">
            <span>￥{{ skuInfo.price }}</span>
          </div>
          <div class="right">
            <span class="text">到手价</span>
            <span class="number">￥{{ skuInfo.price - 998 }}</span>
          </div>
        </div>
      </div>
      <!-- 商品总信息 -->
      <div class="allInfo">
        <!-- pro会员 -->
        <div class="priceInfo">
          <div class="procPrice">
            <img class="iconUrl" src="//yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png" />
            <span class="procDesc">
              Pro会员叠加优惠,再省 ￥94.95
              <span class="iconfont icon-xinxi"></span>
            </span>
          </div>
          <div class="proBtn">开通</div>
        </div>
        <!-- 商品信息 -->
        <div class="baseInfo">
          <div class="info">
            <div class="name">{{ skuInfo.skuName }}</div>
            <div class="simple">
              <div class="preLogo"></div>
              <img class="brandLogo" src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" />
              <div class="title">网易严选</div>
            </div>
            <div class="desc">推荐理由</div>
          </div>
          <div class="comment">
            <div class="info-wrap">
              <div class="num">98.6%</div>
              <div class="com">好评率</div>
            </div>
            <div class="u-icon">></div>
          </div>
        </div>
        <!-- 商品信息列表 -->
        <div class="Info">
          <ul>
            <li>
              <div class="key">1</div>
              <div class="Intro">多彩设计，赏心悦目</div>
            </li>
            <li>
              <div class="key">2</div>
              <div class="Intro">腰背分区，S型椅背，科学护脊支撑</div>
            </li>
            <li>
              <div class="key">3</div>
              <div class="Intro">大曲面自适应腰靠，全时撑腰</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 用户评论 -->
      <div class="comments">
        <div class="top">
          <div>用户评价(15975)</div>
          <div>99.6%好评率</div>
        </div>
        <div class="bottom">
          <header>
            <img src="../../assets/8.jpg" alt="" />
            <span>wang***</span>
          </header>
          <div class="specifications">原味250克/袋+黑胡椒味250克/袋</div>
          <div class="content">不愧是严选，闭着眼就可以买到好东西 ! 给设计师点赞~这样的价格买到保护腰部的办公椅，也给严选点赞。</div>
          <div class="commentPics">
            <img src="../../assets/8.jpg" />
            <img src="../../assets/8.jpg" />
            <img src="../../assets/8.jpg" />
          </div>
        </div>
      </div>
      <!-- 邮费购物返介绍 -->
      <div class="tm-list">
        <ul class="li-list">
          <li class="item">
            <div class="inner">
              <div class="freigh">邮费：满99包邮</div>
              <div>></div>
            </div>
            <van-action-sheet v-model="show1" title="邮费">
              <div class="content">满99免邮费</div>
            </van-action-sheet>
          </li>
          <li class="item">
            <div class="inner">
              <div class="freigh">购物返：最高返375积分</div>
              <div>></div>
            </div>
            <van-action-sheet v-model="show" title="标题">
              <div class="content">内容</div>
            </van-action-sheet>
          </li>
        </ul>
      </div>
      <!-- 商品服务选择 -->
      <div class="tm-list">
        <ul class="li-list">
          <li class="item">
            <div class="inner">
              <div class="freigh">选择规格数量</div>
              <div>></div>
            </div>
          </li>
          <li class="item">
            <div class="inner">
              <div class="freigh">限制：特价商品不可与优惠券叠加使用</div>
              <div>></div>
            </div>
            <van-action-sheet v-model="show" title="标题">
              <div class="content">内容</div>
            </van-action-sheet>
          </li>
          <li class="item">
            <div class="inner">
              <div class="freigh">配送：请选择配送地址</div>
              <div>></div>
            </div>
            <van-action-sheet v-model="show" title="标题">
              <div class="content">内容</div>
            </van-action-sheet>
          </li>
          <li class="item">
            <div class="inner">
              <div class="freigh">服务：严选自营 7天无忧退换 不可用券</div>
              <div>></div>
            </div>
            <van-action-sheet v-model="show" title="标题">
              <div class="content">内容</div>
            </van-action-sheet>
          </li>
        </ul>
      </div>

      <!-- 网易严选 -->
      <div class="dt-section">
        <div class="image">
          <img src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" />
        </div>
        <div class="content">
          <div class="top">网易智造</div>
          <div class="bottom">网易首个智能硬件品牌,坚持网易做产品的敬畏之心,用匠人精神,自主研发、精心制造每一款产品。</div>
        </div>
      </div>
      <!-- 商品参数 -->
      <div class="component-wrapper">
        <div class="PSN">
          <div class="tt">商品参数</div>
          <div class="item">
            <div class="left">保质期</div>
            <div class="right">180天</div>
          </div>
          <div class="item">
            <div class="left">品名</div>
            <div class="right">椅子</div>
          </div>
        </div>
      </div>
      <!-- 图片列表 -->
      <div class="smallPic">
        <img src="https://yanxuan-item.nosdn.127.net/a2fe5c716e0ed7b201e3d71e5fc96138.jpg?quality=75&type=webp&imageView" />
        <img src="https://yanxuan-item.nosdn.127.net/bf2d3bf2a18e48fe2c41ea04df9e3c39.jpg?quality=75&type=webp&imageView" />
        <img src="https://yanxuan-item.nosdn.127.net/cd318168396546a506a2e9467b7e89cc.jpg?quality=75&type=webp&imageView" />
      </div>
    </div>
    <!-- 底部跳转购物车 -->
    <div class="footer">
      <div class="inner">
        <div class="iconfont icon-kefu"></div>
        <van-button class="btn" type="default" block>立即购买</van-button>
        <van-button class="btn" type="default" style="background-color: red; color: white" @click="goShopCart">加入购物车</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/iconfont/iconfont.css";
import { ActionSheet, Swipe, SwipeItem, Button, Sku } from "vant";
import { mapGetters } from "vuex";
import Nav from '@/components/nav'
export default {
  name: "Detail",
  data() {
    return {
      show1: false,
      show: false,
      num: "",
      shuzi: "",
    };
  },
  components: {
    [ActionSheet.name]: ActionSheet,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Button.name]: Button,
    Nav
  },
  methods: {
    async goShopCart() {
      try {
        await this.$store.dispatch("detail/addCartOrUpdate", { skuId: this.shuzi, skuNum: 1 });
        //路由跳转
        let path = this.$store.state.user.token ? "/shopCart" : "/login";
        this.$router.push({ path, query: { skuNum: this.skuNum } });
      } catch (error) {
        alert("加入购物车失败");
      }
    },
  },
  mounted() {
    this.num = String(this.$route.params.skuId);
    this.shuzi = this.num.substr(this.num.length - 1);

    this.$store.dispatch("detail/getDetail", this.shuzi);
    // this.$route.params.skuId
  },
  computed: {
    ...mapGetters("detail", ["skuInfo"]),
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;

  .title_main {
    width: 400px;
    height: 40px;
    font-size: 17px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-shouye {
      flex: 1;
      margin-left: 10px;
    }

    .content {
      flex: 4;
      margin-left: 100px;
    }

    .icon-sousuotianchong {
      flex: 1;
    }

    .icon-gouwuchekong {
      flex: 1;
    }
  }
}

.container {
  margin-bottom: 10px;
  background-color: #f4f4f4;

  .price {
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    color: white;
    background-color: red;
    padding-left: 20px;
    padding-top: 10px;

    .top {
      font-size: 12px;
    }

    .bottom {
      display: flex;
      align-items: center;

      .left {
        font-size: 30px;
      }

      .right {
        width: 100px;
        height: 25px;
        color: red;
        background-color: #fff;
        border-radius: 20px;
        display: flex;
        align-items: center;
        margin-left: 8px;

        .text {
          margin-left: 10px;
          font-size: 12px;
        }

        .number {
          font-size: 13px;
          font-weight: 600;
        }
      }
    }
  }

  .allInfo {
    width: 100%;
    height: 250px;
    padding-top: 10px;
    background-color: #fff;

    .priceInfo {
      width: 90%;
      height: 30px;
      background-color: #fff1d2;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .procPrice {
        margin-left: 10px;
        display: flex;
        font-size: 12px;
        align-items: center;

        .iconUrl {
          width: 25px;
          height: 16px;
        }
      }

      .proBtn {
        height: 20px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 20px;
        background: #12161c;
        font-size: 10px;
        text-align: center;
        color: #f3ca84;
        border-radius: 20px;
      }
    }
  }

  .baseInfo {
    width: 90%;
    height: 60px;
    margin: 30px auto;
    display: flex;
    align-items: center;

    .info {
      width: 500px;
      height: 60px;

      .name {
        font-size: 12px;
        color: #333;
        line-height: 20px;
        font-weight: 700;
      }

      .simple {
        display: flex;
        margin: 10px 0;

        .preLogo {
          width: 30px;
          height: 15px;
          margin-right: 10px;
          background: url(https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png) no-repeat;
          background-size: 100% 100%;
        }

        .brandLogo {
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }

        .title {
          font-size: 12px;
          line-height: 15px;
          color: #7f7f7f;
        }
      }

      .desc {
        font-size: 12px;
        line-height: 15px;
        color: #333;
        font-weight: lighter;
      }
    }

    .comment {
      display: flex;

      // align-items: center;
      .info-wrap {
        .num {
          font-weight: 700;
          font-size: 13px;
          line-height: 15px;
          color: #dd1a21;
          text-align: center;
        }

        .com {
          line-height: 15px;
          font-size: 12px;
          color: #7f7f7f;
        }
      }

      .u-icon {
        margin-left: 10px;
      }
    }
  }

  .Info {
    padding: 10px;
    width: 90%;
    line-height: 25px;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    margin: 0 auto;

    .key {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1px solid #dd1a21;
      border-radius: 50%;
      text-align: center;
      line-height: 12px;
      font-size: 12px;
      color: #dd1a21;
      font-family: PingFang SC;
      font-weight: 700;
      margin-right: 10px;
      vertical-align: middle;
    }

    li {
      font-size: 12px;
      color: #333;
      display: flex;
      align-items: center;
    }
  }

  .tm-list {
    width: 100%;
    margin: 10px auto;
    background-color: #fff;

    .li-list {
      width: 90%;
      margin: 0 auto;

      .item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #d9d9d9;

        &:last-child {
          border-bottom: none;
        }

        .inner {
          width: 100%;
          display: flex;
          align-items: center;

          .freigh {
            flex: 1;
            font-size: 12px;
          }
        }
      }
    }
  }

  :deep(.van-swipe-item) {
    img {
      width: 100%;
      height: 100%;
    }
  }

  .comments {
    width: 100%;
    height: 300px;
    margin-top: 2px;
    background-color: #fff;

    .top {
      width: 90%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: auto;
      padding-top: 10px;
      padding: 0 10px;
      font-size: 15px;
      border-bottom: 1px solid #d9d9d9;
    }

    .bottom {
      header {
        display: flex;
        align-items: center;
        margin-top: 10px;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50px;
        }

        span {
          font-size: 18px;
        }
      }

      .specifications {
        margin-top: 10px;
        font-size: 13px;
      }

      .content {
        margin-top: 10px;
        font-size: 17px;
      }

      .commentPics img {
        width: 80px;
        height: 80px;
        margin: 10px;
      }
    }
  }

  .dt-section {
    width: 100%;
    height: 80px;
    background-color: #fff;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .image {
      width: 40px;
      height: 40px;
      margin: 0 10px;

      img {
        width: 40px;
        height: 40px;
      }
    }

    .content {
      .top {
        font-size: 16px;
        font-weight: 600;
      }

      .bottom {
        margin: 8px 0;
        font-size: 12px;
      }
    }
  }

  .component-wrapper {
    .PSN {
      width: 100%;
      margin: 0 auto;
      background-color: #fff;
      border-style: 1px solid;

      .tt {
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        font-size: 20px;
        padding-left: 10px;
        padding-top: 10px;
        border-bottom: 1px dashed #adadad;
      }

      .item {
        width: 100%;
        height: 50px;
        font-size: 12px;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #adadad;

        .left {
          flex: 1;
          padding-left: 10px;
        }

        .right {
          flex: 4;
        }
      }

      .item:last-child {
        border-bottom: none;
      }
    }
  }

  .smallPic {
    width: 100%;

    img {
      width: 100%;
      height: 80px;
    }
  }
}

.footer {
  height: 45px;
  width: 100%;
  position: fixed;
  bottom: 0px;

  .inner {
    display: flex;
    align-items: center;

    .icon-kefu {
      width: 100px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 20px;
      background-color: #dfdfdf;
    }

    .btn {
      width: 150px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 20px;
    }
  }
}
</style>
